<template>
  <div class="page-content">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
      <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <h1 class="text-xl font-bold text-600">要素式诉状</h1>
      </div>
    </header>
    
    <!-- 功能入口 -->
    <main class="container mx-auto px-4 mt-6">
      <div class="bg-white rounded-xl shadow-md p-4 mb-6">
        <h2 class="text-lg font-semibold mb-3">生成服务</h2>
        
        <div class="grid grid-cols-2 gap-3">
          <!-- 诉状转换 -->
          <div class="relative">
            <router-link to="/convert" class="bg-gradient-to-br from-blue-50 to-blue-100 hover:from-blue-100 hover:to-blue-200 text-blue-700 p-4 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 relative group block">
              <!-- 背景装饰 -->
              <div class="absolute top-0 right-0 w-12 h-12 bg-blue-200 bg-opacity-20 rounded-full -mr-6 -mt-6 group-hover:scale-110 transition-transform duration-200"></div>
              
              <!-- 内容区域 -->
              <div class="text-center">
                <!-- 图标 -->
                <div class="w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center mb-3 shadow-lg mx-auto">
                  <i class="fas fa-exchange-alt text-white text-lg"></i>
                </div>
                
                <!-- 标题和描述 -->
                <h3 class="font-bold text-base mb-1">诉状转换</h3>
                <p class="text-xs text-blue-600">上传传统诉状转换为要素式</p>
              </div>
            </router-link>
            
          </div>
          
          <!-- 诉状生成 -->
          <div class="relative">
            <router-link to="/generate" class="bg-gradient-to-br from-green-50 to-green-100 hover:from-green-100 hover:to-green-200 text-green-700 p-4 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 relative group block">
              <!-- 背景装饰 -->
              <div class="absolute top-0 right-0 w-12 h-12 bg-green-200 bg-opacity-20 rounded-full -mr-6 -mt-6 group-hover:scale-110 transition-transform duration-200"></div>
              
              <!-- 内容区域 -->
              <div class="text-center">
                <!-- 图标 -->
                <div class="w-12 h-12 bg-green-500 rounded-xl flex items-center justify-center mb-3 shadow-lg mx-auto">
                  <i class="fas fa-file-alt text-white text-lg"></i>
                </div>
                
                <!-- 标题和描述 -->
                <h3 class="font-bold text-base mb-1">诉状生成</h3>
                <p class="text-xs text-green-600">智能生成要素式诉状</p>
              </div>
            </router-link>
            
          </div>
          
          <!-- 答辩状转换 -->
          <div class="relative">
            <router-link to="/defense-convert" class="bg-gradient-to-br from-orange-50 to-orange-100 hover:from-orange-100 hover:to-orange-200 text-orange-700 p-4 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 relative group block">
              <!-- 背景装饰 -->
              <div class="absolute top-0 right-0 w-12 h-12 bg-orange-200 bg-opacity-20 rounded-full -mr-6 -mt-6 group-hover:scale-110 transition-transform duration-200"></div>
              
              <!-- 内容区域 -->
              <div class="text-center">
                <!-- 图标 -->
                <div class="w-12 h-12 bg-orange-500 rounded-xl flex items-center justify-center mb-3 shadow-lg mx-auto">
                  <i class="fas fa-sync-alt text-white text-lg"></i>
                </div>
                
                <!-- 标题和描述 -->
                <h3 class="font-bold text-base mb-1">答辩状转换</h3>
                <p class="text-xs text-orange-600">上传传统答辩状转换为要素式</p>
              </div>
            </router-link>
            
          </div>
          
          <!-- 答辩状生成 -->
          <div class="relative">
            <router-link to="/defense" class="bg-gradient-to-br from-purple-50 to-purple-100 hover:from-purple-100 hover:to-purple-200 text-purple-700 p-4 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 relative group block">
              <!-- 背景装饰 -->
              <div class="absolute top-0 right-0 w-12 h-12 bg-purple-200 bg-opacity-20 rounded-full -mr-6 -mt-6 group-hover:scale-110 transition-transform duration-200"></div>
              
              <!-- 内容区域 -->
              <div class="text-center">
                <!-- 图标 -->
                <div class="w-12 h-12 bg-purple-500 rounded-xl flex items-center justify-center mb-3 shadow-lg mx-auto">
                  <i class="fas fa-gavel text-white text-lg"></i>
                </div>
                
                <!-- 标题和描述 -->
                <h3 class="font-bold text-base mb-1">答辩状生成</h3>
                <p class="text-xs text-purple-600">针对起诉状生成答辩意见</p>
              </div>
            </router-link>
            
          </div>
        </div>
      </div>
      
      <div class="bg-white rounded-xl shadow-md p-6">
        <h2 class="text-lg font-semibold mb-4">下载服务</h2>
        <div class="grid grid-cols-1 gap-4">
          <router-link to="/templates" class="bg-orange-50 hover:bg-orange-100 text-orange-700 p-4 rounded-lg">
            <div class="flex items-center">
              <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center mr-3">
                <i class="fas fa-download text-orange-600"></i>
              </div>
              <div class="text-left">
                <h3 class="font-medium">两状模板下载</h3>
                <p class="text-sm text-gray-500">67类案由两状模板下载</p>
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script> 